
<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh_cn">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <title>5.8.&nbsp;&#26696;&#20363;&#65306;Access Bar [&#28145;&#20837;&#27973;&#20986; Greasemonkey]</title>
      <link rel="shortcut icon" href="/favicon.ico">
      <link rel="stylesheet" href="../css/dig.css" type="text/css">
      <meta http-equiv="Link" content='&lt;../css/modern.css&gt;; type="text/css"; rel=stylesheet, &lt;../css/empty.css&gt;; type="text/css";
      rel=stylesheet'>
      <link rev="made" href="mailto:mark@diveintomark.org">
      <meta name="generator" content="DocBook XSL Stylesheets V1.68.1">
      <meta name="keywords" content="Firefox, Greasemonkey, Javascript, user script, userscript">
      <link rel="start" href="../toc/index.html" title="&#28145;&#20837;&#27973;&#20986; Greasemonkey">
      <link rel="up" href="index.html" title="&#31532;&nbsp;5&nbsp;&#31456;&nbsp;&#23454;&#20363;&#25945;&#23398;">
      <link rel="prev" href="zoomtextarea.html" title="5.7.&nbsp;&#26696;&#20363;&#65306;Zoom Textarea">
      <link rel="next" href="../advanced/index.html" title="&#31532;&nbsp;6&nbsp;&#31456;&nbsp;&#39640;&#32423;&#35805;&#39064;">
   </head>
   <body id="diveintogreasemonkey-org" class="casestudy-accessbar">
      <div class="z" id="intro">
         <div class="sectionInner">
            <div class="sectionInner2">
               <div class="s">
                  <h1><a href="/" accesskey="1">&#28145;&#20837;&#27973;&#20986; Greasemonkey</a></h1>
                  <p>&#25945;&#32769;&#32593;&#32476;&#23398;&#26032;&#25226;&#25103;</p>
               </div>
               <div class="s">
                  <ul>
                     <li><a href="../">&#36215;&#22987;&#39029;</a> &middot; 
                     </li>
                     <li><a href="../toc/">&#30446;&#24405;</a> &middot; 
                     </li>
                     <li><a href="../download/">&#19979;&#36733;</a> &middot; 
                     </li>
                     <li><a href="http://greasemonkey.mozdev.org/">&#31435;&#21363;&#19979;&#36733; Greasemonkey</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <div id="main">
         <div id="mainInner">
            <p id="breadcrumb">&#24744;&#30340;&#20301;&#32622;&#65306;<a href="../">&#36215;&#22987;&#39029;</a> &#8594; <a href="../toc/index.html">&#30446;&#24405;</a> &#8594; <a href="index.html">&#23454;&#20363;&#25945;&#23398;</a> &#8594; <span class="thispage">&#26696;&#20363;&#65306;Access Bar</span></p>
            <div class="section" lang="zh_cn">
               <div class="titlepage">
                  <div>
                     <div>
                        <h2 class="title"><a name="casestudy.accessbar" class="skip" href="#casestudy.accessbar" title="link to this section"><img src="../images/permalink.gif" alt="[link]" title="link to this section" width="8" height="9"></a> 5.8.&nbsp;&#26696;&#20363;&#65306;Access Bar
                        </h2>
                     </div>
                     <div>
                        <h3 class="subtitle">&#22312;&#22266;&#23450;&#29366;&#24577;&#26639;&#20013;&#26174;&#31034;&#38190;&#30424;&#24555;&#25463;&#38190;</h3>
                     </div>
                     <div>
                        <div class="abstract">
                           <h3 class="title"></h3>
                           <p>Access Bar &#21487;&#20197;&#26174;&#31034;&#20986;&#39029;&#38754;&#20013;&#24050;&#23450;&#20041;&#30340;&#24555;&#25463;&#38190;&#12290;&#24555;&#25463;&#38190;&#26159;&#30001;&#32593;&#39029;&#20316;&#32773;&#23450;&#20041;&#30340;&#65292;&#29992;&#26469;&#22686;&#24378;&#39029;&#38754;&#26131;&#29992;&#24615;&#30340;&#38190;&#30424;&#24555;&#25463;&#26041;&#24335;&#65292;&#35753;&#24744;&#21487;&#20197;&#36890;&#36807;&#38190;&#30424;&#24555;&#36895;&#36339;&#36716;&#21040;&#29305;&#23450;&#30340;&#38142;&#25509;&#25110;&#34920;&#21333;&#12290;(<a href="http://diveintoaccessibility.org/day_15_defining_keyboard_shortcuts.html">&#20102;&#35299;&#24555;&#25463;&#38190;</a>&#12290;)
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
               <p>Firefox &#25903;&#25345;&#20351;&#29992;&#24555;&#25463;&#38190;&#65292;&#20294;&#26159;&#23427;&#19981;&#20250;&#26174;&#31034;&#39029;&#38754;&#20013;&#24050;&#23450;&#20041;&#30340;&#24555;&#25463;&#38190;&#12290;&#30001;&#27492;&#65292;Access Bar &#35806;&#29983;&#20102;&#12290;</p>
               <div class="example"><a name="example.casestudy.accessbar" class="skip" href="#example.casestudy.accessbar" title="link to this example"><img src="../images/permalink.gif" alt="[link]" title="link to this example" width="8" height="9"></a> 
                  <h3 class="title">&#20363;&nbsp;5.8.&nbsp;
                     <a href="http://www.firefox.net.cn/dig/download/accessbar.user.js" title="Download Access Bar">
                        <code class="filename">accessbar.user.js</code>
                        </a>
                     
                  </h3><pre class="programlisting ">// ==UserScript==
// @name          Access Bar
// @namespace     http://diveintogreasemonkey.org/download/
// @description   show accesskeys defined on page
// @include       *
// ==/UserScript==

function addGlobalStyle(css) {
	var head, style;
	head = document.getElementsByTagName('head')[0];
	if (!head) { return; }
	style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = css;
	head.appendChild(style);
}

var akeys, descriptions, a, desc, label, div;
akeys = document.evaluate(
	"//*[@accesskey]",
	document,
	null,
	XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
	null);
if (!akeys.snapshotLength) { return; }
descriptions = new Array();
desc = '';
for (var i = 0; i &lt; akeys.snapshotLength; i++) {
	a = akeys.snapshotItem(i);
	desctext = '';
	if (a.nodeName == 'INPUT') {
		label = document.evaluate("//label[@for='" + a.name + "']",
		document,
		null,
		XPathResult.FIRST_ORDERED_NODE_TYPE,
		null).singleNodeValue;
		if (label) {
			desctext = label.title;
			if (!desctext) { desctext = label.textContent; }
		}
	}
	if (!desctext) { desctext = a.textContent; }
	if (!desctext) { desctext = a.title; }
	if (!desctext) { desctext = a.name; }
	if (!desctext) { desctext = a.id; }
	if (!desctext) { desctext = a.href; }
	if (!desctext) { desctext = a.value; }
	desc = '&lt;strong&gt;[' +
	a.getAttribute('accesskey').toUpperCase() + ']&lt;/strong&gt; ';
	if (a.href) {
		desc += '&lt;a href="' + a.href + '"&gt;' + desctext + '&lt;/a&gt;';
	} else {
		desc += desctext;
	}
	descriptions.push(desc);
}
descriptions.sort();
div = document.createElement('div');
div.id = 'accessbar-div-0';
desc = '&lt;div&gt;&lt;ul&gt;&lt;li class="first"&gt;' + descriptions[0] + '&lt;/li&gt;';
for (var i = 1; i &lt; descriptions.length; i++) {
	desc = desc + '&lt;li&gt;' + descriptions[i] + '&lt;/li&gt;';
}
desc = desc + '&lt;/ul&gt;&lt;/div&gt;';
div.innerHTML = desc;
document.body.style.paddingBottom = "4em";
window.addEventListener(
	"load",
	function() {
		document.body.appendChild(div);
	},
	true);
addGlobalStyle(
	'#accessbar-div-0 {'+
	'  position: fixed;' +
	'  left: 0;' +
	'  right: 0;' +
	'  bottom: 0;' +
	'  top: auto;' +
	'  border-top: 1px solid silver;' +
	'  background: black;' +
	'  color: white;' +
	'  margin: 1em 0 0 0;' +
	'  padding: 5px 0 0.4em 0;' +
	'  width: 100%;' +
	'  font-family: Verdana, sans-serif;' +
	'  font-size: small;' +
	'  line-height: 160%;' +
	'}' +
	'#accessbar-div-0 a,' +
	'#accessbar-div-0 li,' +
	'#accessbar-div-0 span,' +
	'#accessbar-div-0 strong {' +
	'  background-color: transparent;' +
	'  color: white;' +
	'}' +
	'#accessbar-div-0 div {' +
	'  margin: 0 1em 0 1em;' +
	'}' +
	'#accessbar-div-0 div ul {' +
	'  margin-left: 0;' +
	'  margin-bottom: 5px;' +
	'  padding-left: 0;' +
	'  display: inline;' +
	'}' +
	'#accessbar-div-0 div ul li {' +
	'  margin-left: 0;' +
	'  padding: 3px 15px;' +
	'  border-left: 1px solid silver;' +
	'  list-style: none;' +
	'  display: inline;' +
	'}' +
	'#accessbar-div-0 div ul li.first {' +
	'  border-left: none;' +
	'  padding-left: 0;' +
	'}');</pre></div>
               <p>&#36825;&#27573;&#20195;&#30721;&#20998;&#20026;&#20845;&#20010;&#27493;&#39588;&#65306;</p>
               <div class="orderedlist">
                  <ol type="1">
                     <li>&#23450;&#20041;&#19968;&#20010;&#36741;&#21161;&#20989;&#25968;&#65292;<code class="function">addGlobalStyle</code>
                        
                     </li>
                     <li>&#33719;&#21462;&#21253;&#21547;&#26377; <code class="sgmltag-attribute">accesskey</code> &#29087;&#24713;&#30340;&#39029;&#38754;&#20803;&#32032;
                     </li>
                     <li>&#36941;&#21382;&#36825;&#20123;&#20803;&#23646;&#65292;&#28982;&#21518;&#20026;&#27599;&#20010;&#20803;&#32032;&#20915;&#23450;&#26368;&#24688;&#24403;&#30340;&#25991;&#26412;&#25551;&#36848;</li>
                     <li>&#20026;&#24050;&#21551;&#29992; <code class="sgmltag-attribute">accesskey</code> &#30340;&#20803;&#32032;&#65292;&#26500;&#24314;&#19968;&#20010;&#26377;&#24207;&#30340;&#38142;&#25509;&#21015;&#34920;&#12290;
                     </li>
                     <li>&#25226;&#36825;&#20010;&#26377;&#24207;&#21015;&#34920;&#21152;&#21040;&#39029;&#38754;&#20013;&#65292;&#20351;&#29992;&#26631;&#20934;&#30340; <code class="sgmltag-element">ul</code> &#21644; <code class="sgmltag-element">li</code> &#20803;&#32032;
                     </li>
                     <li>&#26679;&#24335;&#21270;&#27492;&#21015;&#34920;&#65292;&#35753;&#23427;&#30475;&#36215;&#26469;&#20687;&#19968;&#20010;&#22266;&#23450;&#22312;&#35270;&#22270;&#24213;&#37096;&#30340;&#20266;&#29366;&#24577;&#26639;</li>
                  </ol>
               </div>
               <p>&#39318;&#20808;&#65292;&#25105;&#38656;&#35201;&#19968;&#20010;&#36741;&#21161;&#20989;&#25968; <code class="function">addGlobalStyle</code>&#65292;&#27880;&#20837;&#25105;&#33258;&#24049;&#30340; CSS &#26679;&#24335;(&#22312;&#31532;&#20845;&#27493;&#20013;&#20250;&#29992;&#21040;)&#12290;&#20851;&#20110;&#27492;&#27169;&#24335;&#30340;&#26356;&#22810;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/add-css.html" title="4.13.&nbsp;&#28155;&#21152; CSS &#26679;&#24335;">&#28155;&#21152; CSS &#26679;&#24335;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">function addGlobalStyle(css) {
	var head, style;
	head = document.getElementsByTagName('head')[0];
	if (!head) { return; }
	style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = css;
	head.appendChild(style);
}</pre></div>
               <p>&#31532;&#20108;&#27493;&#65292;&#25214;&#20986;&#39029;&#38754;&#20013;&#26377; <code class="sgmltag-attribute">accesskey</code> &#23646;&#24615;&#30340;&#20840;&#37096;&#20803;&#32032;&#12290;&#22312; Firefox &#30340; XPath &#25903;&#25345;&#19979;&#24456;&#23481;&#26131;&#21150;&#21040;&#12290;&#27880;&#37322;&#65306;&#22914;&#26524; XPath &#26597;&#35810;&#36820;&#22238;&#31354;&#38598;&#65292;&#25105;&#21487;&#20197;&#20445;&#35777;&#65292;&#37027;&#26159;&#22240;&#20026;&#36825;&#37324;&#27809;&#26377;&#20160;&#20040;&#38656;&#35201;&#26174;&#31034;&#30340;&#12290;&#27492;&#27169;&#24335;&#30340;&#26356;&#22810;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/match-attribute.html" title="4.6.&nbsp;&#25805;&#20316;&#25152;&#26377;&#26377;&#29305;&#23450;&#23646;&#24615;&#30340;&#20803;&#32032;">&#25805;&#20316;&#25152;&#26377;&#26377;&#29305;&#23450;&#23646;&#24615;&#30340;&#20803;&#32032;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">var akeys, descriptions, a, i, desc, label, div;
akeys = document.evaluate(
	"//*[@accesskey]",
	document,
	null,
	XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
	null);
if (!akeys.snapshotLength) { return; }</pre></div>
               <p>&#31532;&#19977;&#27493;&#65292;&#26500;&#36896;&#27599;&#20010;&#21551;&#29992; <code class="sgmltag-attribute">accesskey</code> &#20803;&#32032;&#30340;&#36866;&#24403;&#25551;&#36848;&#30340;&#28165;&#21333;&#21015;&#34920;&#65292;&#36825;&#26159;&#33050;&#26412;&#20013;&#26368;&#22797;&#26434;&#30340;&#19968;&#27573;&#12290;&#38382;&#39064;&#26159; <code class="sgmltag-attribute">accesskey</code> &#23646;&#24615;&#21487;&#20197;&#20986;&#29616;&#22312;&#35768;&#22810;&#19981;&#21516;&#30340; <acronym title="HyperText Markup Language">HTML</acronym> &#20803;&#32032;&#20013;&#12290;
               </p>
               <p>&#34920;&#21333;&#20013;&#30340; <code class="sgmltag-element">input</code> &#20803;&#32032;&#21487;&#20197;&#23450;&#20041; <code class="sgmltag-attribute">accesskey</code>&#12290;<code class="sgmltag-element">input</code> &#20803;&#32032;&#21487;&#26377;&#25110;&#21487;&#26080;&#30456;&#20851;&#32852;&#30340; <code class="sgmltag-element">label</code>&#65292;&#23427;&#21253;&#21547;&#19982; <code class="sgmltag-element">input</code> &#22495;&#26377;&#20851;&#32852;&#30340;&#25991;&#23383;&#26631;&#31614;&#12290;&#22914;&#26524;&#26377;&#65292;<code class="sgmltag-element">label</code> &#21487;&#33021;&#21253;&#21547; <code class="sgmltag-attribute">title</code> &#23646;&#24615;&#65292;&#25552;&#20379;&#20851;&#20110; <code class="sgmltag-element">input</code> &#22495;&#30340;&#26356;&#22810;&#35814;&#32454;&#20449;&#24687;&#12290;&#25110;&#32773; <code class="sgmltag-element">label</code> &#23646;&#24615;&#21482;&#21253;&#21547;&#25991;&#26412;&#12290;&#25110;&#32773; <code class="sgmltag-element">input</code> &#20803;&#32032;&#21487;&#33021;&#27809;&#26377;&#20851;&#32852;&#30340;&#26631;&#31614;&#65292;&#36825;&#20013;&#24773;&#20917;&#19979;&#65292;&#25105;&#26368;&#22909;&#20351;&#29992; <code class="sgmltag-element">input</code> &#20803;&#32032;&#30340; <code class="sgmltag-attribute">value</code> &#23646;&#24615;&#12290;
               </p>
               <p>&#21478;&#19968;&#26041;&#38754;&#65292;<code class="sgmltag-element">label</code> &#33258;&#24049;&#20063;&#21487;&#20197;&#23450;&#20041; <code class="sgmltag-attribute">accesskey</code>&#65292;&#20195;&#26367;&#26631;&#31614;&#25551;&#36848;&#30340; <code class="sgmltag-element">input</code> &#20803;&#32032;&#12290;&#20877;&#32773;&#65292;&#25105;&#20250;&#26597;&#25214; <code class="sgmltag-element">label</code> &#20803;&#32032;&#30340; <code class="sgmltag-attribute">title</code> &#23646;&#24615;&#20316;&#20026;&#25551;&#36848;&#65292;&#22914;&#26524; <code class="sgmltag-attribute">title</code> &#19981;&#23384;&#22312;&#65292;&#23601;&#36864;&#32780;&#20351;&#29992;&#26631;&#31614;&#30340;&#25991;&#26412;&#12290;
               </p>
               <p>&#38142;&#25509;&#21516;&#26679;&#21487;&#20197;&#23450;&#20041; <code class="sgmltag-attribute">accesskey</code> &#23646;&#24615;&#12290;&#22914;&#26524;&#26377;&#65292;&#36873;&#25321;&#38142;&#25509;&#30340;&#25991;&#26412;&#26159;&#29702;&#25152;&#24403;&#28982;&#30340;&#12290;&#20294;&#26159;&#22914;&#26524;&#38142;&#25509;&#19981;&#21253;&#21547;&#25991;&#26412;(&#20363;&#22914;&#65292;&#23427;&#21482;&#21253;&#21547;&#19968;&#24352;&#22270;&#29255;)&#65292;&#37027;&#20040;&#19979;&#20010;&#22320;&#26041;&#23601;&#26159;&#25214;&#38142;&#25509;&#30340; <code class="sgmltag-attribute">title</code> &#23646;&#24615;&#12290;&#22914;&#26524;&#38142;&#25509;&#26082;&#27809;&#26377;&#25991;&#26412;&#65292;&#21448;&#27809;&#26377; <code class="sgmltag-attribute">title</code>&#65292;&#25105;&#23601;&#36864;&#32780;&#20351;&#29992;&#38142;&#25509;&#30340; <code class="sgmltag-attribute">name</code> &#23646;&#24615;&#65292;&#35201;&#26159;&#36824;&#26159;&#19981;&#25104;&#65292;&#23601;&#29992;&#38142;&#25509;&#30340; <code class="sgmltag-element">id</code> &#23646;&#24615;&#12290;
               </p>
               <p>Ain't heuristics a bitch? &#36825;&#26159;&#23436;&#25972;&#30340;&#31639;&#27861;&#12290;&#35760;&#30528;&#65292;<code class="varname">akeys</code> &#26159;&#19968;&#20010; <code class="classname">XPathResult</code> &#23545;&#35937;&#65292;&#25152;&#20197;&#25105;&#35201;&#35843;&#29992; <code class="methodname">akeys.snapshotItem(i)</code> &#26469;&#24471;&#21040;&#27599;&#20010;&#32467;&#26524;&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">descriptions = new Array();
desc = '';
for (var i = 0; i &lt; akeys.snapshotLength; i++) {
	a = akeys.snapshotItem(i);
	desctext = '';
	if (a.nodeName == 'INPUT') {
		label = document.evaluate("//label[@for='" + a.name + "']",
		document,
		null,
		XPathResult.FIRST_ORDERED_NODE_TYPE,
		null).singleNodeValue;
		if (label) {
			desctext = label.title;
			if (!desctext) { desctext = label.textContent; }
		}
	}
	if (!desctext) { desctext = a.textContent; }
	if (!desctext) { desctext = a.title; }
	if (!desctext) { desctext = a.name; }
	if (!desctext) { desctext = a.id; }
	if (!desctext) { desctext = a.href; }
	if (!desctext) { desctext = a.value; }
	desc = '&lt;strong&gt;[' +
	a.getAttribute('accesskey').toUpperCase() + ']&lt;/strong&gt; ';
	if (a.href) {
		desc += '&lt;a href="' + a.href + '"&gt;' + desctext + '&lt;/a&gt;';
	} else {
		desc += desctext;
	}
	descriptions.push(desc);
}</pre></div>
               <p>&#31532;&#22235;&#27493;&#27604;&#36739;&#31616;&#21333;&#65292;&#22240;&#20026; Javascript &#25968;&#32452;&#26377;&#20010; <code class="methodname">sort</code> &#26041;&#27861;&#65292;&#21487;&#20197;&#32473;&#25968;&#32452;&#22312;&#21407;&#22320;&#25490;&#24207;&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">descriptions.sort();</pre></div>
               <p>&#31532;&#20116;&#27493;&#21019;&#24314;&#20102; <acronym title="HyperText Markup Language">HTML</acronym> &#20195;&#30721;&#65292;&#29992;&#26469;&#28210;&#26579;&#21551;&#29992; <code class="sgmltag-attribute">accesskey</code> &#30340;&#20803;&#32032;&#21015;&#34920;&#12290;&#25105;&#21019;&#24314;&#19968;&#20010;&#22806;&#21253;&#35013;
                  <code class="sgmltag-element">&lt;div&gt;</code>&#65292;&#20026;&#23383;&#31526;&#20018;&#24418;&#24335;&#30340;&#24555;&#25463;&#38190;&#21015;&#34920;&#26500;&#36896; <acronym title="HyperText Markup Language">HTML</acronym>&#65292;&#35774;&#32622;&#22806;&#21253;&#35013; <code class="sgmltag-element">&lt;div&gt;</code>  &#30340; <code class="property">innerHTML</code> &#23646;&#24615;&#65292;&#26368;&#21518;&#25226;&#23427;&#21152;&#21040;&#39029;&#38754;&#30340;&#26411;&#23614;&#12290;&#22240;&#20026;&#24403;&#29992;&#25143;&#33050;&#26412;&#25191;&#34892;&#26102;&#65292;&#23545;&#39029;&#38754;&#30340;&#22797;&#26434;&#25913;&#21160;&#24212;&#35813;&#22312;&#39029;&#38754;&#21152;&#36733;&#23436;&#25104;&#20197;&#21518;&#65292;&#25152;&#20197;&#25105;&#20351;&#29992; <code class="methodname">window.addEventListener</code> &#21152;&#20837; <code class="systemitem">onload</code> &#20107;&#20214;&#65292;&#26469;&#21521;&#39029;&#38754;&#20013;&#21152;&#20837; <code class="sgmltag-element">&lt;div&gt;</code>&#12290;
               </p>
               <p>&#26377;&#20851; <code class="property">innerHTML</code> &#30340;&#29992;&#27861;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/innerhtml.html" title="4.11.&nbsp;&#24555;&#36895;&#25554;&#20837;&#22797;&#26434;&#30340; HTML">&#24555;&#36895;&#25554;&#20837;&#22797;&#26434;&#30340; <acronym title="HyperText Markup Language">HTML</acronym></a>&#65292; &#26377;&#20851; <code class="methodname">window.addEventListener</code> &#30340;&#29992;&#27861;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/onload.html" title="4.16.&nbsp;&#22788;&#29702;&#24050;&#28210;&#26579;&#30340;&#39029;&#38754;">&#22788;&#29702;&#24050;&#28210;&#26579;&#30340;&#39029;&#38754;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">div = document.createElement('div');
div.id = 'accessbar-div-0';
desc = '&lt;div&gt;&lt;ul&gt;&lt;li class="first"&gt;' + descriptions[0] + '&lt;/li&gt;';
for (var i = 1; i &lt; descriptions.length; i++) {
	desc = desc + '&lt;li&gt;' + descriptions[i] + '&lt;/li&gt;';
}
desc = desc + '&lt;/ul&gt;&lt;/div&gt;';
div.innerHTML = desc;
document.body.style.paddingBottom = "4em";
window.addEventListener(
	"load",
	function() {
		document.body.appendChild(div);
	},
	true);</pre></div>
               <p>&#26368;&#21518;&#65292;&#31532;&#20845;&#27493;&#65292;&#20026;&#20102;&#20351;&#25554;&#20837;&#30340; <acronym title="HyperText Markup Language">HTML</acronym> &#30475;&#36215;&#26469;&#26356;&#21327;&#35843;&#65292;&#25105;&#22312;&#39029;&#38754;&#20013;&#21152;&#20837;&#20102;&#33258;&#24049;&#30340; CSS  &#22768;&#26126;&#12290;(&#24456;&#26126;&#26174;&#65292;&#23427;&#23558;&#20316;&#20026;&#22266;&#23450;&#30340;&#40657;&#33394;&#24037;&#20855;&#26639;&#20986;&#29616;&#22312;&#39029;&#38754;&#30340;&#24213;&#37096;&#12290;&#28378;&#21160;&#39029;&#38754;&#30340;&#26102;&#20505;&#65292;&#23427;&#20173;&#28982;&#22312;&#37027;&#20010;&#20301;&#32622;&#65292;&#36825;&#26159;&#22240;&#20026; Firefox &#25903;&#25345; <code class="literal">position:fixed</code>&#26174;&#31034;&#31867;&#22411;&#12290;)&#26356;&#22810;&#30340;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/add-css.html" title="4.13.&nbsp;&#28155;&#21152; CSS &#26679;&#24335;">&#28155;&#21152; CSS &#26679;&#24335;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">addGlobalStyle(
	'#accessbar-div-0 {'+
	'  position: fixed;' +
	'  left: 0;' +
	'  right: 0;' +
	'  bottom: 0;' +
	'  top: auto;' +
	'  border-top: 1px solid silver;' +
	'  background: black;' +
	'  color: white;' +
	'  margin: 1em 0 0 0;' +
	'  padding: 5px 0 0.4em 0;' +
	'  width: 100%;' +
	'  font-family: Verdana, sans-serif;' +
	'  font-size: small;' +
	'  line-height: 160%;' +
	'}' +
	'#accessbar-div-0 a,' +
	'#accessbar-div-0 li,' +
	'#accessbar-div-0 span,' +
	'#accessbar-div-0 strong {' +
	'  background-color: transparent;' +
	'  color: white;' +
	'}' +
	'#accessbar-div-0 div {' +
	'  margin: 0 1em 0 1em;' +
	'}' +
	'#accessbar-div-0 div ul {' +
	'  margin-left: 0;' +
	'  margin-bottom: 5px;' +
	'  padding-left: 0;' +
	'  display: inline;' +
	'}' +
	'#accessbar-div-0 div ul li {' +
	'  margin-left: 0;' +
	'  padding: 3px 15px;' +
	'  border-left: 1px solid silver;' +
	'  list-style: none;' +
	'  display: inline;' +
	'}' +
	'#accessbar-div-0 div ul li.first {' +
	'  border-left: none;' +
	'  padding-left: 0;' +
	'}');</pre></div>
               <div class="download">
                  <h3>&#19979;&#36733;</h3>
                  <ul>
                     <li>
                        <a href="http://www.firefox.net.cn/dig/download/accessbar.user.js">
                           <code class="filename">accessbar.user.js</code>
                           </a>
                        
                     </li>
                  </ul>
               </div>
               <div class="seealso">
                  <h3>&#21442;&#35265;</h3>
                  <ul>
                     <li>
                        <a href="../patterns/add-css.html" title="4.13.&nbsp;&#28155;&#21152; CSS &#26679;&#24335;">&#28155;&#21152; CSS &#26679;&#24335;</a>
                        
                     </li>
                     <li>
                        <a href="../patterns/match-attribute.html" title="4.6.&nbsp;&#25805;&#20316;&#25152;&#26377;&#26377;&#29305;&#23450;&#23646;&#24615;&#30340;&#20803;&#32032;">&#25805;&#20316;&#25152;&#26377;&#26377;&#29305;&#23450;&#23646;&#24615;&#30340;&#20803;&#32032;</a>
                        
                     </li>
                     <li>
                        <a href="../patterns/innerhtml.html" title="4.11.&nbsp;&#24555;&#36895;&#25554;&#20837;&#22797;&#26434;&#30340; HTML">&#24555;&#36895;&#25554;&#20837;&#22797;&#26434;&#30340; <acronym title="HyperText Markup Language">HTML</acronym></a>
                        
                     </li>
                     <li>
                        <a href="../patterns/onload.html" title="4.16.&nbsp;&#22788;&#29702;&#24050;&#28210;&#26579;&#30340;&#39029;&#38754;">&#22788;&#29702;&#24050;&#28210;&#26579;&#30340;&#39029;&#38754;</a>
                        
                     </li>
                  </ul>
               </div>
            </div>
            <div style="float: left">&#8592;&nbsp;<a class="NavigationArrow" href="zoomtextarea.html">&#26696;&#20363;&#65306;Zoom Textarea</a></div>
            <div style="text-align: right"><a class="NavigationArrow" href="../advanced/index.html">&#39640;&#32423;&#35805;&#39064;</a>&nbsp;&#8594;
            </div>
            <hr style="clear:both">
            <div class="footer">
               <p class="copyright">&#29256;&#26435; &copy; 2005 Mark Pilgrim &middot; <a title="&#21457;&#36865;&#32473;&#25105;&#26377;&#20110;&#27492;&#20070;&#30340;&#21453;&#39304;&#24847;&#35265;" href="mailto:mark@diveintomark.org">mark@diveintomark.org</a> &middot; <a href="../license/gpl.html" title="GNU &#36890;&#29992;&#20844;&#20849;&#35768;&#21487;&#35777;">&#20351;&#29992;&#26465;&#27454;</a></p>
            </div>
         </div>
      </div>
   </body>
</html>